<template>
  <div class="navigation-container">
    <div class="navigation-title">
      <h2>页面导航</h2>
    </div>
    <ul class="navigation-list">
      <li v-for="router in routers" :key="router.path">
        <a :href="router.path" target="_blank">{{ router.name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      routers: [
        { path: '/', name: '页面导航' },
        { path: '/login', name: '登录页面' },
        { path: '/register', name: '注册页面' },
        { path: '/patient', name: '患者首页' },
        { path: '/doctor', name: '医生首页' }
      ]
    }
  }
};
</script>

<style scoped>
@import "/src/assets/bootstrap.min.css";

/* 整体容器样式 */
.navigation-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background-color: #FFF0F5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.navigation-title h2 {
  text-align: center;
  font-size: 1.5rem;
  color: black;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 列表样式 */
.navigation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navigation-list li {
  margin-bottom: 15px;
}

/* 链接样式 */
.navigation-list a {
  display: block;
  font-size: 1.2rem;
  text-decoration: none;
  padding: 10px 20px;
  color: white;
  font-weight: bold;
  background-color: #ffc0cb;  /* 使用你指定的颜色 */
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 悬停效果 */
.navigation-list a:hover {
  background-color: #ffc0cb;  /* 悬停时使用稍微深一些的粉色 */
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.4); /* 使用浅粉色阴影效果 */
}
</style>
